<template>
  <main
    style="
      width: 100%;
      height: 280px;
      background-color: rgba(255, 255, 203, 0.5);
    "
  >
    <div>
      <div style="width: 100%; height: 32px">
        <div>
          <el-input
            v-model="input3"
            style="width: 100%"
            placeholder="请输入曲名"
            class="input-with-select"
          >
            <template #prepend>
              <el-select
                v-model="select"
                placeholder="类型"
                style="width: 100px"
              >
                <el-option label="本地收藏" value="1" />
                <el-option label="云端收藏" value="2" />
              </el-select>
            </template>
            <template #append>
              <el-button :icon="Search" @click="winshow()" />
              <el-button
                :icon="RefreshRight"
                style="margin-left: 15px"
                @click="deli()"
              />
            </template>
            <!-- <template #append>
                        <el-button :icon="Search" @click="winshow()"/>
                    </template> -->
          </el-input>
        </div>
      </div>
      <div style="width: 100%; height: 224px; background-color: antiquewhite">
        <el-table
          :data="tableData"
          style="width: 100%; height: 100%"
          size="small"
          empty-text="看啥，收藏还没开发呢，再看叫坤坤打你"
        >
          <el-table-column label="歌曲名称" width="180">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                size="small"
                @click="handleEdit(scope.$index, scope.row)"
              >
                试听
              </el-button>
              <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >
                弹奏
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
        <div
      style="
        width: 100%;
        height: 24px;
        background-color: antiquewhite;
        display: flex;
        justify-content: center;
        align-items: center;
      "
    >
      <el-pagination
        background
        size="small"
        layout="prev, pager, next"
        :total="pagination.total"
        :pager-count="5"
      />
    </div>
  </main>
</template>

<script lang="ts" setup>
import { Search, RefreshRight } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
import { message } from "@/utils/messages";
const input3 = ref("");
const select = ref("1");

interface User {
  date: string;
  name: string;
  address: string;
}
const deli = () => {
    input3.value = "";
};
const pagination = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1,
});

const winshow = () => {
  if (select.value == "1") {
    message("开发中", "warning");
  } else {
    if (input3.value == "") {
      message("请输入歌曲名", "warning");
    } else {
      message("开发中", "warning");
    }
  }
};
const handleEdit = (index: number, row: User) => {
  console.log(index, row);
};
const handleDelete = (index: number, row: User) => {
  console.log(index, row);
};

const tableData: User[] = [];
</script>
